<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <!-- 查询 -->
            <div class="query">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="课程名">
                        <el-input v-model="formInline.user" placeholder="课程名"></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名">
                        <el-input v-model="formInline.user" placeholder="学生姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="提交时间">
                        <el-input v-model="formInline.user" placeholder="时间"></el-input>
                    </el-form-item>
                    <el-form-item label="是否提交">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="已提交" value="shanghai"></el-option>
                            <el-option label="未提交" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>

                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="课程名" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.stuName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="提交时间" width="200">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否提交" width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state == 1">已提交</span>
                        <span v-if="scope.row.state == 2">未提交</span>
                    </template>
                </el-table-column>
                <el-table-column label="作业内容" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.content }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
                </el-pagination>
            </div>

            <el-dialog title="修改" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="课程名称" label-width="100px">
                        <el-input v-model="selectTable.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>
                    <el-form-item label="提交时间" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>

                    <el-form-item label="是否提交" label-width="100px">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="已提交" value="1"></el-option>
                            <el-option label="未提交" value="2"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateFood">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="课程名称" label-width="100px">
                        <el-input v-model="selectTable.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>
                    <el-form-item label="提交时间" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>

                    <el-form-item label="是否提交" label-width="100px">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="已提交" value="1"></el-option>
                            <el-option label="未提交" value="2"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateFood">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import headTop from '../components/headTop'
// import { baseUrl, baseImgPath } from '@/config/env'
import { getFoods, getFoodsCount, getMenu, updateFood, deleteFood, getResturantDetail, getMenuById } from '@/api/getData'
export default {
    data() {
        return {
            limit: 20,
            count: 0,
            tableData: [
                {
                    courseName: 'java',
                    stuName: '张三',
                    date: '2023-2-20',
                    state: '1',
                    content: 'www.123.com'
                },
                {
                    courseName: 'Java',
                    stuName: '李四',
                    date: '2023-2-20',
                    state: '2',
                    content: ''
                },
                {
                    courseName: 'JavaScript',
                    stuName: '王五',
                    date: '2023-2-20',
                    state: '1',
                    content: 'www.1234.com'
                }
            ],
            formInline: [],
            currentPage: 1,
            selectTable: {},
            dialogFormVisible: false,
            menuOptions: [],
            selectMenu: {},
            selectIndex: null,

            specsFormVisible: false,
            expendRow: [],
        }
    },
    created() {

    },

    components: {
        headTop,
    },
    methods: {

        // tableRowClassName(row, index) {
        //     if (index === 1) {
        //         return 'info-row';
        //     } else if (index === 3) {
        //         return 'positive-row';
        //     }
        //     return '';
        // },

        // deleteSpecs(index) {
        //     this.specs.splice(index, 1);
        // },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
        },
        // expand(row, status) {
        //     if (status) {
        //         this.getSelectItemData(row)
        //     } else {
        //         const index = this.expendRow.indexOf(row.index);
        //         this.expendRow.splice(index, 1)
        //     }
        // },
        handleEdit(row) {
            this.getSelectItemData(row, 'edit')
            this.dialogFormVisible = true;
        },
        async getSelectItemData(row, type) {

        },
        handleSelect(index) {
            this.selectIndex = index;
            this.selectMenu = this.menuOptions[index];
        },
        handleDelete(index, row) {

        },
        // handleServiceAvatarScucess(res, file) {
        //     if (res.status == 1) {
        //         this.selectTable.image_path = res.image_path;
        //     } else {
        //         this.$message.error('上传图片失败！');
        //     }
        // },
        // beforeAvatarUpload(file) {
        //     const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
        //     const isLt2M = file.size / 1024 / 1024 < 2;

        //     if (!isRightType) {
        //         this.$message.error('上传头像图片只能是 JPG 格式!');
        //     }
        //     if (!isLt2M) {
        //         this.$message.error('上传头像图片大小不能超过 2MB!');
        //     }
        //     return isRightType && isLt2M;
        // },

    },
}
</script>

<style lang="less" scoped>
@import '../style/mixin';

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.table_container {
    padding: 20px;
}

.Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.el-input__inner {
    height: 30px;
    width: 150px;
}

.el-button--primary,
.is-plain {
    height: 35px;
}
</style>
